<template>
  <div>
    <div class="box">
      <div class="box-l">
        <h3>可用积分</h3>
        <p>0</p>
      </div>
      
      <img src="@/assets/logo.png" alt />
      <div class="jf">
        <div class="con">
          <h4>
            已联续签到
            <span>0</span> 天
          </h4>
          <div class="box-t">
            <dl v-for="(v,i) in jidata" :key="i">
              <dd>{{v.fenshu}}</dd>
              <dt>{{v.shijian}}</dt>
            </dl>
          </div>
          <div class="box-b">
            <van-button type="info" class="btn">签到领积分</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['jidata'],
  data() {
    return {
      checked: true,
    };
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 353px;
  /* background: #257eff; */
  color: #fff;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: linear-gradient(to bottom, #257eff, #fff);
}
.box h3 {
  line-height: 40px;
}
.box p {
  font-size: 40px;
}
.box img {
  width: 129px;
  height: 115px;
}
.jf {
  display: flex;
  justify-content: center;
}


.con {
  align-self: center;
  width: 326px;
  height: 200px;
  background: #fff;
  border-radius: 10px;
}
.con h4 {
  color: #000;
  font-weight: 600;
  margin: 20px 20px 0;
}
.con span {
  color: red;
}
.van-switch {
  width: 20px;
  height: 17px;
}
dl dd {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  background: orange;
  font-size: 8px;
  border-radius: 50%;
}
.box-t {
  margin-top: 34px;
  display: flex;
  justify-content: space-evenly;
}
.box-t dt {
  font-size: 10px;
  color: #999;
  margin-top: 9px;
}
.btn {
  width: 252px;
  height: 40px;
  background: linear-gradient(to bottom, #febd26, #fa613e);
  color: #fff;
  border: none;
}
.van-button__text {
  color: #fff !important;
}
.box-b {
  display: flex;
  justify-content: center;
  padding-top: 17px;
}
</style>